<template>
  <div class="full-box shadow-box padding-box">
    <div class="operate-bar">
      <div class="btn-group">
        <el-button type="primary" @click="save(targetTable, id)"
          >保存</el-button
        >
        <el-button type="info" @click="linkBack">返回</el-button>
      </div>
    </div>
    <div class="c-form-padding">
      <GenerateMain :gData="gData"></GenerateMain>

      <div>
        <el-checkbox v-model="checked">
          <span style="color: red">
            我单位郑重承诺：本单位上报的数据正确、真实有效，且对上报数据的真实性、准确性负责，并愿意承担由此引起的所有责任。
          </span>
        </el-checkbox>

        <div>
          <el-input
            style="width: 300px; margin: 20px 10px 0 0"
            v-model="creater"
            placeholder="经办人"
          ></el-input>
          <el-input
            style="width: 300px; margin-top: 20px"
            v-model="createrPhone"
            placeholder="经办人手机号"
          ></el-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import GenerateMain from "@/components/GenerateForm/GenerateMain.vue";
import gData from "@/mock/customizeForm.js";
import { commonDetails, getSelectOptions, getTableField } from "@/api/Index";
import operateMixin from "@/components/GenerateForm/operateMixin";
export default {
  name: "CommonForm",
  mixins: [operateMixin],
  components: {
    GenerateMain,
  },
  data() {
    return {
      //   gData: gData,
      gData: null,
      id: 0,
      targetTable: "",
      checked: false,
    };
  },
  methods: {
    initField() {
      getTableField({ tableName: this.targetTable }).then((res) => {
        if (res.code == 0) {
          this.gData = res.data.map((item) => {
            if (parseInt(item.isQuery) === 0) {
              this.initOptions(item);
            }
            return item;
          });
        }
      });
    },
    initDetails() {
      Promise.all([
        getTableField({ tableName: this.targetTable }),
        commonDetails({ tableName: this.targetTable, id: this.id }),
      ]).then((res) => {
        if (res[0].code == 0) {
          this.gData = res[0].data.map((item) => {
            if (parseInt(item.isQuery) === 0) {
              this.initOptions(item);
            }
            return item;
          });
        }
        if (res[1].code == 0 && res[1].data) {
          this.assignValue(this.gData, res[1].data);

          this.recursionGData(this.gData);

          this.creater = res[1].data.creater;
          this.createrPhone = res[1].data.createrPhone;
        }
      });
    },
    assignValue(gData, valueObj) {
      return gData.map((i) => {
        if (i.children) {
          this.assignValue(i.children, valueObj);
        } else {
          try {
            i.bindModel = valueObj[i.dbField];
          } catch (error) {
            throw error;
          }
        }
        return i;
      });
    },
    recursionGData(gData) {
      gData.forEach((i) => {
        if (i.children) {
          this.recursionGData(i.children);
        } else {
          if (i.relation) {
            this.initCondition(i, gData);
          }
        }
      });
    },
    initCondition(target, gData) {
      gData.forEach((i) => {
        if (i.children) {
          this.initCondition(target, i.children);
        } else {
          if (target.relation == i.dbField) {
            if (target.relation_value == i.bindModel) {
              target.hidden = false;
            }
          }
        }
      });
    },
    linkBack() {
      this.$router.go(-1);
    },
  },
  created() {
    this.targetTable = this.$route.params.targetTable;
    this.id = this.$route.params.id;
    this.$store.commit("files/SET_CURRENT", this.id);

    if (this.id == 0) {
      this.initField();
    } else {
      this.initDetails();
    }
  },
};
</script>

<style lang="scss" scoped>
.operate-bar {
  box-sizing: border-box;
  padding: 0 200px;
}
</style>
